<template>
	<view class="wp">
		<!-- #ifdef MP-WEIXIN -->
		<nav-public :title="'商城订单'" :background="'#9532E4'" :color="'white'"></nav-public>
		<!-- #endif -->
		<view class="padding30">
			<view class="status" v-if="info.order.status==-1">
				<image src="/static/order/ddfh.png" mode="widthFix"></image>
				<text>已退款</text>
			</view>
			<view class="status" v-else>
				<image src="/static/order/ddfh.png" mode="widthFix"></image>
				<text>{{info.status}}</text>
			</view>
			<view class="shopinfo">
				<view class="s_item s_one" v-if="info.order.status==1">
					<image src="/static/order/bh.png" mode="widthFix"></image>
					<view class="tit purple">商家正在备货中</view>
				</view>
				<block v-if="(info.order.status==2||info.order.status==3)&&info.order.expresssn">
					<view class="company">
						<view class="com_order">
							<image class="com_img" mode="widthFix" src="/static/order/bh.png"></image>
							<view class="com_company">{{info.order.expresscom}} 快递单号</view>
							<view class="com_sn clamp">{{info.order.expresssn}}</view>
							<image src="/static/order/copy.png" class="com_copy" mode="widthFix" @click="copyTap(info.order.expresssn)"></image>
						</view>
					</view>
					<view class="logistics">
						<view class="log_order">
							<image class="log_img" src="/static/order/bh.png" mode="widthFix"></image>
							<!-- <view class="log_code">待取件 取件码 10-2-6545</view> -->
							<view class="clamp">{{stepData[0].status}}</view>
						</view>
						<cc-defineStep v-if="isopenLog==2" :colors="colors" :stepData="stepData"></cc-defineStep>
						<view class="log_open" v-if="isopenLog==1" @click="openLog(2)">展开物流信息 <image src="/static/jiantou1.png"></image></view>
						<view class="log_close" v-if="isopenLog==2" @click="openLog(1)">收起 <image src="/static/jiantou1.png"></image></view>
					</view>
				</block>
				<view class="s_item" v-if="info.address.province">
					<image src="/static/order/shdz.png"></image>
					<view class="tit">
						<view>送至 {{info.address.province}}{{info.address.city}}{{info.address.area}}{{info.address.address}}</view>
						<view class="s_com">{{info.address.realname}}-{{info.address.mobile}}</view>
					</view>
				</view>
			</view>
			<view class="info" v-for="item in info.goods" :key="item.goodsid">
				<view class="shopname">自营商城 ></view>
				<view class="flex" @click="$navTo('/pages/product/product?id='+item.goodsid)">
					<image :src="item.thumb"></image>
					<view class="content">
						<view class="clamp2">{{item.title}}</view>
						<view class="small" v-if="item.optiontitle!=''">规格：{{item.optiontitle}}</view>
					</view>
					<view class="g_price">
						<text class="small">￥</text><text class="price">{{item.price}}</text>
						<view class="number">{{(item.price/item.total).toFixed(2)}}/件</view>
						<view class="number">共{{item.total}}件</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="item">
					<view class="left">订单编号：</view>
					<view class="flex">
						<text>{{info.order.ordersn}}</text>
						<image src="/static/order/copy.png" mode="widthFix" @click="copyTap(info.order.ordersn)"></image>
					</view>
				</view>
				<!-- <view class="item">
					<view class="left">售价合计：</view>
					<view>￥{{info.order.goodsprice}}</view>
				</view> -->
				<!-- <view class="item">
					<view class="left">支付身份：</view>
					<view>{{info.isvip}}</view>
				</view>
				<view class="item">
					<view class="left">享受折扣：</view>
					<view>{{info.vipdiscount}}</view>
				</view>
				<view class="item">
					<view class="left">返现金额：</view>
					<view>-{{info.vipdiscountprice}}</view>
				</view> -->
				<view class="item">
					<view class="left">总金额：</view>
					<view style="font-weight: bold;color: #000;">￥{{info.order.price}}</view>
				</view>
				<block v-if="info.order.status==-1">
					<view class="item">
						<view class="left">现金退回：</view>
						<view>￥{{info.order.money}}</view>
					</view>
					<view class="item">
						<view class="left">米券退回：</view>
						<view>{{info.order.micredit}}</view>
					</view>
				</block>
				<block v-else>
					<view class="item">
						<view class="left">现金支付：</view>
						<view>￥{{info.order.money}}</view>
					</view>
					<view class="item">
						<view class="left">米券支付：</view>
						<view>{{info.order.micredit}}</view>
					</view>
				</block>
				<view class="item" v-if="info.order.status!=-1">
					<view class="left">待补贴金额：</view>
					<view class="flex">￥{{info.order.ratemoney}}<view class="go_look" @click="navOrder(4)">去看看</view></view>
				</view>
				<view class="item">
					<view class="left">备注信息：</view>
					<view>{{info.order.remark}}</view>
				</view>
				<view class="item">
					<view class="left">下单时间：</view>
					<view>{{info.order.createtime}}</view>
				</view>
				<view class="item" v-if="info.order.paytime!=0">
					<view class="left">支付时间：</view>
					<view>{{info.order.paytime}}</view>
				</view>
				<view class="item" v-if="info.order.status==3">
					<view class="left">收货时间：</view>
					<view>{{info.order.finishtime}}</view>
				</view>
			</view>
			<!-- #ifdef MP-ALIPAY -->
			<view class="alikefu">
				<contact-button tnt-inst-id="Ze1_kUBV" scene="SCE01336870" size="120rpx" icon="https://img.jinghushi.com/images/0/2025/02/Tz15S0HgSuUuSduSSSSSQH3P1ZE15u.png"/>
			</view>
			<!-- #endif -->
			<view class="buttons">
				<!-- #ifdef MP-WEIXIN -->
				<button size="mini" @click="kefu">联系客服</button>
				<!-- #endif -->
				<!-- <button size="mini" v-if="(info.order.status==1||info.order.status==3)&&info.order.canrefund" @click="tiao">申请退款</button> -->
				<button size="mini" v-if="info.order.canrefund" @click="tiao">{{info.order.refund_button}}</button>
				<button size="mini" v-if="info.order.status=='0'" @click="remove">取消订单</button>
				<!-- <button size="mini" v-if="info.order.status==2" @click="searchDetail">查看物流</button> -->
				<!-- <button size="mini" @click="searchDetail">查看物流</button> -->
				<button class="text_color" size="mini" v-if="info.order.status=='2'" @click="goodstap">确认收货</button>
				<button class="bg" size="mini" v-if="info.order.status=='3' && info.order.iscomment==0" @click="$navTo('/pages/order/evaluate?id='+id)">去评价</button>
				<button class="bg" size="mini" v-if="info.order.status==0" @click="$navTo('/pages/money/pay?orderid=' + info.order.id)">继续付款</button>
			</view>
		</view>
	</view>
</template>

<script>
	var plugin = requirePlugin("logisticsPlugin")
	export default {
		data() {
			return {      
				isopenLog: 1,//1展开 2收起
				id: '',
				info: {
					isvip: '',
					order: {
						ordersn: '',
						goodsprice: '',
						createtime: '',
						status: '',
						paytype: 3,
						canrefund: '',
						refund_button: '',
						refundtype: -10,
						iscomment: -10
					},
					status: '',
					goods: [],
					vipdiscount: '',
					vipdiscountprice: 0
				},
				colors:"#9532E4",
				//模拟后台返回的数据
				stepData: []
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
			if(option.isOpen) this.isopenLog = option.isOpen;
		},
		methods: {
			navOrder(id) {
				uni.setStorageSync('upOrderType', id);
				this.$navTo('/pages/index/order');
			},
			searchDetail(){
				this.$axios('tracewaybill/getWaybill', "POST", 'member', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						// const waybillToken = res.waybill_token;
						// plugin.openWaybillTracking({
						//  	waybillToken: waybillToken
						// });
						this.stepData = res.data.data.waybill_token;
					}
				})
			},
			openLog(id){
				this.isopenLog = id;
			},
			getInfo() {
				this.$axios('Detail/main', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						// 待收货状态下才调用物流接口
						if(this.info.order.status==2||this.info.order.status==3){
						// if(this.info.order.status==2){
							this.searchDetail();
							this.stepData.reverse()
						}
					}
				})
			},
			remove: function() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消订单',
					success: function(res) {
						if (res.confirm) {
							that.$axios('Op/cancel', "POST", 'order', {
								orderid: that.id
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg('订单已取消');
									setTimeout(() => {
										that.$navRed('/pages/order/detailsx?id=' + that
											.id);
									}, 700)
								}
							})
						}
					}
				});
			},
			goodstap() {
				this.$axios('op/complete', "POST", 'order', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('已确认收货');
						setTimeout(() => {
							this.$navRed('/pages/order/detailsx?id=' + this
								.id);
						}, 700)
					}
				})
			},
			tiao() {
				var _this = this;
				if (this.info.order.refundtype == 0) {
					uni.navigateTo({
						url: "/pages/order/Customers?id=" + _this.id
					})
				} else {
					uni.navigateTo({
						url: "/pages/order/AfterSales?id=" + _this.id
					})
				}
			},
			kefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			copyTap(v) {
				uni.setClipboardData({
					data: v
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
	}
	.wp {
		// padding: 0 30rpx;
		padding-bottom: 140upx;
		background: #FBF8FE;
	}

	.status {
		font-size: 40rpx;
		color: #9532E4;
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		font-weight: 600;
		flex-wrap: wrap;
		image{
			width: 36rpx;
			margin-right: 10rpx;
		}
		.refund{
			width: 100%;
			color: #999999;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 18rpx;
			text{
				color: #9532E4;
				margin-left: 20rpx;
			}
		}
	}
	.company{
		margin-bottom: 20rpx;
		.com_order{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.com_img{
				width: 36rpx;
				margin-right: 18rpx;
			}
			.com_company{
				font-size: 28rpx;
				font-weight: 600;
				margin-right: 8rpx;
			}
			.com_sn{
				font-size: 24rpx;
				flex: 1;
			}
			.com_copy{
				width: 28rpx;
			}
		}
	}
	.logistics{
		margin: 20rpx 0;
		.log_order{
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 600;
			align-items: center;
			.log_img{
				width: 36rpx;
				margin-right: 18rpx;
			}
			.log_code{
				color: #9532E4;
				margin-right: 8rpx;
			}
			.clamp{
				flex: 1;
			}
		}
		.log_open{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;
			color: $bg-color;
			image{
				width: 24rpx;
				height: 24rpx;
				transform: rotateZ(90deg);
				margin-left: 10rpx;
			}
		}
		.log_close{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-top: 10rpx;
			color: $bg-color;
			image{
				width: 24rpx;
				height: 24rpx;
				transform: rotateZ(270deg);
				margin-left: 10rpx;
			}
		}
	}
	.shopinfo{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		.s_item{
			display: flex;
			image{
				width: 34rpx;
				height: 32rpx;
				margin-right: 18rpx;
			}
			.tit{
				color: #333333;
				font-weight: 600;
				.s_com{
					color: #333333;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
			.purple{
				color: #9532E4;
			}
		}
		.s_one{
			margin-bottom: 24rpx;
			align-items: center;
		}
	}
	.info{
		margin: 20rpx 0;
		background: #fff;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333333;
		border-radius: 12rpx;
		.shopname{
			line-height: 50rpx;
			font-weight: 600;
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E9E9E9;
			padding-bottom: 20rpx;
			margin-top: 6rpx;
			image{
				width: 116rpx;
				height: 116rpx;
				border-radius: 14rpx;
			}
			.content{
				font-size: 24rpx;
				padding-left: 16rpx;
				flex: 1;
				color: #333333;
				.small{
					font-size: 20rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
			.g_price{
				// color: #AF141D;
				color: #666;
				font-size: 28rpx;
				font-weight: 600;
				width: 160rpx;
				text-align: right;
				white-space: nowrap;
				.small{
					font-size: 24rpx;
				}
				.number{
					font-size: 20rpx;
					color: #999999;
					// text-align: center;
					font-weight: 400;
				}
			}
		}
		.hexiao{
			padding-top: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			image{
				width: 230rpx;
			}
		}
		.allhexiao{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
			font-weight: 600;
			.small{
				font-size: 24rpx;
				color: #999999;
				font-weight: 400;
			}
		}
	}
	.detail{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #333333;
			line-height: 2.8;
			align-items: center;
			.left{
				font-size: 28rpx;
				font-weight: 600;
			}
			.go_look{
				line-height: 52rpx;
				background: #F1E0FD;
				border-radius: 26rpx;
				color: #8615E1;
				text-align: center;
				padding: 0 20rpx;
				margin-left: 12rpx;
			}
			.flex{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
	.buttons {
		background: #fff;
		display: flex;
		height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		z-index: 100;
		text-align: center;
		padding: 0 22rpx;
		button {
			height: 52rpx;
			padding: 0 30rpx;
			margin: 0 8rpx;
			letter-spacing: 1px;
			border-radius: 26rpx;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			line-height: 52rpx;
			white-space: nowrap;
			background: #fff;
		}
		.bg{
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			color: #fff;
		}
	}
</style>